<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <select v-model="kind">
            <option value="com1">组件一</option>
            <option value="com2">组件二</option>
        </select>
        
        <component :is="kind"><!--绑定哪个组件显示哪个组件-->
        <!-- 组件在 vm.currentview 变化时改变！ -->
        </component>

        <com1 v-show='kind=="com1"'></com1>
        <com2 v-show='kind=="com2"'></com2>
    </div>
    <script src="vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                kind:''
            },
            components:{
                com1:{
                    template:'<p ref="xxx">第一个组件<input/></p>',
                    mounted:function(e){
                        console.log(this.$refs.xxx)
                    }
                },
                com2:{
                    template:'<p>第二个组件<input/></p>'
                }
            }
        })
    
    </script>
</body>
</html>